<template>
  <div class='container'>
    <el-card class="card">
    <div slot="header">{{$route.query.id?'试题修改':'试题录入'}}</div>
    <el-divider></el-divider>
    <el-form :model="formData" :rules="rules" ref="formDatas" label-width="120px">
        <!-- 学科 -->
        <el-form-item label="学科：" prop="subjectID" >
          <el-select v-model="formData.subjectID" style="width:400px" @change="changesubject">
            <el-option v-for="item in subjectID" :key="item.id" :label="item.subjectName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 目录 -->
         <el-form-item label="目录：" prop="catalogID">
          <el-select style="width:400px" v-model="formData.catalogID">
            <el-option v-for="item in catalogID" :key="item.id" :label="item.directoryName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
         <!-- 企业 -->
         <el-form-item label="企业：" prop="enterpriseID">
          <el-select style="width:400px" v-model="formData.enterpriseID">
            <el-option v-for="item in enterpriseID" :key="item.id" :label="item.shortName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
         <!-- 城市 -->
         <el-form-item label="城市："  prop="city"  >
          <el-select style="width:195px" v-model="formData.province" @change="getcity">
            <el-option v-for="(item, index) in provinces" :key="index" :label="item" :value="item" ></el-option>
          </el-select>
          &nbsp;
          <el-select style="width:195px" v-model="formData.city">
            <el-option v-for="(item,index) in city" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
         <!-- 方向 -->
         <el-form-item label="方向：" prop="direction">
          <el-select style="width:400px" v-model="formData.direction">
            <el-option v-for="(item,index) in direction" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <!-- 题型 -->
        <el-form-item label="题型："  prop="questionType" v-if="formData.questionType!==3">
          <el-radio-group v-model="formData.questionType">
            <!-- <el-radio :label="3">单选题</el-radio>
            <el-radio :label="6">多选题</el-radio>
            <el-radio :label="9">简答题</el-radio> -->
            <el-radio v-for="item in questionType" :key="item.value" :label="item.value+''" :value="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 难度 -->
        <el-form-item label="难度：" prop="difficulty">
          <el-radio-group v-model="formData.difficulty">
            <!-- <el-radio :label="3">简单</el-radio>
            <el-radio :label="6">一般</el-radio>
            <el-radio :label="9">困难</el-radio> -->
            <el-radio v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.label" @change="xuanzhe"></el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 题干 -->
          <el-form-item label="题干：" prop="question">
            <quill-editor v-model="formData.question" ref="myQuillEditor" class="editor" :options="editorOption" />
        </el-form-item>
        <!-- 选项 -->
        <!-- <div>
              <div v-if="formData.questionType==='1'" class="choices">
              <el-radio-group v-model="radio">
                <el-radio v-for=" item in formData.options" :key="item.code" :label="1">{{item.code}}
                </el-radio>
                <el-input v-model="item.title"></el-input>
              </el-radio-group>
            </div>
            <div v-if="formData.questionType==='2'">
              <el-checkbox v-for=" item in formData.options" :key="item.code">{{item.code}}</el-checkbox>
            </div> -->
          <div v-if="formData.questionType!=='3'">
          <el-form-item label="选项：" class="choice">
            <el-radio-group v-model="radio">
           <div :key="item.code" v-for="item in formData.options" class="choices">
            <el-radio v-if="formData.questionType==='1'" :label="item.isRight">{{item.code}}：</el-radio>
            <el-checkbox v-if="formData.questionType==='2'" :label="item.isRight">{{item.code}}：</el-checkbox>
            <el-input v-model="item.title" style="width:240px">
            </el-input>
            <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="item.img" :src="item.img">
            <span v-else class="avatar">上传图片</span>
            <i class="el-icon-circle-close"></i>
            </el-upload>
          </div>
            </el-radio-group>
           <div v-if="formData.questionType!=='3'">
             <el-button type="danger" :disabled="formData.questionType!=='2'" size="small" @click="add">+增加选项与答案</el-button>
           </div>
        </el-form-item>
        </div>
        <!-- 视频解析 -->
        <el-form-item label="视频解析：">
          <el-input style="width:400px"></el-input>
        </el-form-item>
        <!-- 答案解析 -->
        <el-form-item label="答案解析：" prop="answer">
           <quill-editor v-model="formData.answer" ref="myQuillEditor" class="editor" :options="editorOption" />
        </el-form-item>
        <!-- 题目备注 -->
        <el-form-item label="题目备注：" class="choice" prop="remarks">
         <el-input type="textarea" :rows="4" v-model="formData.remarks" style="width:400px"></el-input>
        </el-form-item>
        <!-- 试题标签 -->
            <el-form-item label="试题标签：" prop="tags">
            <el-select style="width:400px" v-model="formData.tags">
              <el-option v-for="item in tags" :key="item.id" :label="item.tagName" :value="item.tagName"></el-option>
            </el-select>
        </el-form-item>
        <!-- 提交 -->
         <el-form-item>
          <el-button v-if="!$route.query.id" @click="submit()" type="primary">确认提交</el-button>
          <el-button v-else @click="update()">确认修改</el-button>
        </el-form-item>
    </el-form>
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { citys, provinces } from '@/api/hmmm/citys'
import { list } from '@/api/hmmm/subjects'
import { list as lists } from '@/api/hmmm/directorys'
import { list as listss } from '@/api/hmmm/companys'
import { list as listsss } from '@/api/hmmm/tags'
import { add, update, detail } from '@/api/hmmm/questions'
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  ['image'] // 链接、图片、视频-----['link', 'image', 'video']
]
export default {
  data () {
    return {
      questionType,
      difficulty,
      direction,
      city: [],
      subjectID: [],
      catalogID: [],
      enterpriseID: [],
      tags: [],
      provinces: provinces(),
      editorOption: {
        placeholder: '',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions
          }
        }
      },
      content: '',
      radio: '',
      formData: {
        answer: null,
        subjectID: null,
        catalogID: null,
        enterpriseID: null,
        province: null,
        city: null,
        direction: null,
        questionType: '1',
        difficulty: null,
        question: null,
        remarks: null,
        tags: null,
        options: [
          { isRight: 1, code: 'A', title: '', img: '' },
          { isRight: 2, code: 'B', title: '', img: '' },
          { isRight: 4, code: 'C', title: '', img: '' },
          { isRight: 5, code: 'D', title: '', img: '' }
        ],
        isRight: {
          type: Boolean
        }
      },
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        city: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        question: [
          { required: true, message: '请输入题干', trigger: 'blur' }
        ],
        tags: [
          { required: true, message: '请选择标签', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请输入答案', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    quillEditor
  },
  created () {
    this.list()
    // this.lists()
    this.listss()
    this.listsss()
    if (this.$route.query.id) {
      this.getQuestion()
    }
  },
  methods: {
    xuanzhe () {},
    async getQuestion () {
      const { data } = await detail({ id: this.$route.query.id })
      this.formData = data
      console.log(111)
      console.log(data)
    },
    submit () {
      this.$refs.formDatas.validate(async valid => {
        // console.log(111)
        // console.log(this.formData)
        if (valid) {
          await add(this.formData)
          this.$message.success('提交成功')
          this.$router.push('/questions/list')
        } else {
          this.$message.error('提交失败')
        }
      })
    },
    update () {
      this.$refs.formDatas.validate(async valid => {
        if (valid) {
          await update(this.formData)
          this.$message.success('修改成功')
          this.$router.push('/questions/list')
        } else {
          this.$message.error('修改失败')
        }
      })
    },
    async listsss (id) {
      const { data: { items } } = await listsss(id)
      console.log(items)
      this.tags = items
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    getcity (value) {
      // console.log(value)
      this.city = citys(value)
    },
    async listss (id) {
      const { data: { items } } = await listss({ id })
      // console.log(items)
      this.enterpriseID = items
    },
    async list (id) {
      const { data: { items } } = await list(id)
      this.subjectID = items
      // console.log(this.subjectID)
      // console.log(1111111)
    },
    async changesubject () {
      const { data: { items } } = await lists()
      console.log(this.formData.subjectID)
      this.catalogID = items.filter(item => {
        console.log(item)
        return item.subjectID === this.formData.subjectID ? item.directoryName : ''
      }
      )
      console.log(this.catalogID)
    },
    add () {
      this.formData.options.push({
        title: '',
        img: '',
        isRight: false,
        code: String.fromCharCode(65 + this.formData.options.length)
      })
    }
  }
}
</script>

<style scoped lang='scss'>
// ::v-deep.myQuillEditor{
//   height: 200px;
// }
 .choice{
    margin-top: 80px;
  }
  .choices{
    padding-top:5px;
    // display:block;
    // float: left;
  }
  .avatar-uploader{
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  margin-left: 10px;
}
.avatar {
  width: 100px;
  height: 60px;
  display: block;
  border: 1px dashed #000;
}

i{
  position: relative;
  top: -65px;
  left: 50px;
}
::v-deep .ql-editor{
  height: 200px !important;
}
::v-deep .ql-toolbar.ql-snow{
  padding: 0 8px !important;
}
</style>
